<!doctype html>
<%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8"
         language="java"%>
<%@ include file="/jsp/mobile/include/include.jsp"%>
<html lang="cn">
<head>
    <%@ include file="/jsp/mobile/include/header.jsp" %>
    <title>无卡收款</title>
</head>
<body>
<form id="nocardForm" action="<%=request.getContextPath()%>/mobile/index/mobaoCheckSms">
    <div class="main">
        <token:tokenTag></token:tokenTag>
        <input type="hidden" id="bankCode" name="bankCode" value="${payCard.bankCode}"/>

        <input type="hidden" id="cardByNo" name="cardByNo" value="${nocardIncomeDomain.incomeCardNo}"/>
        <input type="hidden" id="amount" name="amount" value="${nocardIncomeDomain.incomeAmt}"/>
        <input type="hidden" id="payType" name="payType" value="${nocardIncomeDomain.payType}"/>

        <!--获取验证码后补-->
        <input type="hidden" id="ksPayOrderId" name="ksPayOrderId" value="${mobaoPrePayResponse.ksPayOrderId}"/>
        <input type="hidden" id="orderId" name="orderId" value="${mobaoPrePayResponse.orderId}"/>

        <div class="jCn">￥<fmt:formatNumber pattern="#,##0.00" value="${nocardIncomeDomain.incomeAmt}"/></div>
        <div class="bkms bkms2">
            <dl class="clearfix">
                <dt><img src="<%=request.getContextPath()%>/images/mobile/${payCard.bankCode}.png"></dt>
                <dd>
                    <div class="bankNm">
                        <p class="tit"><common:getDicByCode key="2100" value="${payCard.bankCode}"/></p>

                        <p class="con">
                            <span>尾号<c:out value="${payCard.lastCardNo}"/></span>
                        </p>
                        <i id="collasp${model.incomeCardNo}" class="ico ico16"></i>
                    </div>
                </dd>
            </dl>

        </div>
        <div class="ciTab" id="detailId" >
            <ul>
                <li>
                    <span class="tit">姓名</span>
                    <input id="cardByName" name="cardByName" type="hidden"
                           value="${_MOBILEUSER_.merchantInfoDetailModel.legalName}">
                    <span class="f14" style="color: #999;"><common:getStringByReplace
                            key="${_MOBILEUSER_.merchantInfoDetailModel.legalName}" startPos="1"/></span>
                </li>
                <li>
                    <span class="tit">身份证</span>
                    <input id="cerNumber" name="cerNumber" type="hidden"
                           value="${_MOBILEUSER_.merchantInfoDetailModel.legalIdentityno}">
                    <span class="f14" style="color: #999;"><common:getStringByReplace
                            key="${_MOBILEUSER_.merchantInfoDetailModel.legalIdentityno}" startPos="6"
                            endPos="13"/></span>
                </li>
                <li>
                    <span class="tit">卡类型</span>
                    <input type="radio" name="cardType" value="00" onclick="radioChange()"checked > 贷记卡
                    <input type="radio" name="cardType" value="01" onclick="radioChange()"> 借记卡
                    <%--<input type="radio" name="cardType" value="02"> 准贷记卡--%>
                </li>
                <div id="creditData">
                <li>
                    <span class="tit">有效期</span>
                    <input id="expireDate" name="expireDate" class="text" maxlength="4" placeholder="月/年，如：0920" value="${payCard.validThru}">
                </li>
                <li>
                    <span class="tit">CVV2</span>
                    <input id="cvv2" name="cvv2" class="text" maxlength="3" value="${payCard.cvv2}" placeholder="信用卡背面后三位数">
                </li>
                </div>
                <li>
                    <span class="tit">手机号</span>
                    <input id="mobile" name="mobile" class="text" maxlength="11"
                           value="${_MOBILEUSER_.merchantInfoDetailModel.sysAccount}">
                </li>
            </ul>
        </div>

        <div class="ciTab mt15">
            <ul>
                <li>
                    <span class="tit">验证码</span>
                    <input id="yzm" name="yzm" type="tel" class="text" maxlength="6" placeholder="输入验证码" autocomplete="off">
                    <a id="verifyTime" href="javascript:getVerifyCode();" class="yzm" style="color:#000;">获取验证码</a>
                </li>
            </ul>
        </div>

        <div class="mt15 ml5 gray6">注意：请确保输入的卡号跟持卡人信息匹配（姓名，证件号码，银行预留手机号），信息不匹配或非本人卡不能进行交易。</div>
        <div class="payOk mb20">
            <div class="mt20">
                <a class="butn butn-gray" id="confirmAmt">确认支付</a>
            </div>

        </div>
    </div>
</form>
</body>
<script type="text/javascript">

    $(document).ready(function() {
        changeStyleByValue();
    });

    function changeStyleByValue() {
        debugger;
        var _orderId = $("#orderId").val();
        var  smsCode=$("#yzm").val();
        if (_orderId!="" && smsCode!="") {
            $("#confirmAmt").removeClass("butn-gray").attr("href",
                "javascript:nocardpay();");
        } else {
            $("#confirmAmt").addClass("butn-gray").removeAttr("href");
        }
    }

    $("#yzm").bind("input propertychange", function() {
        //这里写当input的文字(text)发生改变时所执行的代码！
        changeStyleByValue();
    });


    function radioChange() {
        debugger;
        var _cardType = $('input:radio[name="cardType"]:checked').val();
        if (_cardType == '00') {
            $('#creditData').show();
        }else {
            $('#creditData').hide();
        }
    }
    var wait = 60;
    function nocardpay() {
        var msg = checkData();
        if (msg == '') {
            var smsCode=$("#yzm").val();

            if(smsCode==''){
                window.openMsg("输入短信验证码", 2);
                return;
            }
            var orderId=$("#orderId").val();
            var ksPayOrderId=$('#ksPayOrderId').val();
            if(orderId==''){
                window.openMsg("请先验证手机号", 2);
                return;
            }
            $("#confirmAmt").removeAttr("href");
            $("#nocardForm").submit();

        } else {
            window.openMsg(msg, 3);
        }
    }

    function verifyCodeTime() {
        var _obj = $("#verifyTime");
        if (wait <= 0) {
            $(_obj).attr("href", "javascript:getVerifyCode();");
            $(_obj).html("获取验证码");
            wait = 60;
        } else {
            $(_obj).removeAttr("href");
            $(_obj).html(wait + "秒重新获取");
            wait--;
            setTimeout(function () {verifyCodeTime();}, 1000);
        }
    }

    function checkData() {
        var _cardType = $('input:radio[name="cardType"]:checked').val();
        if (_cardType == '00') {
            var _expireDate = $("#expireDate").val().trim();
            if (_expireDate == '') {
                return "输入银行卡有效期";
            } else if (_expireDate.length != 4) {
                return "有效期为四位月年格式";
            }
            var _cvv2 = $("#cvv2").val().trim();
            if (_cvv2 == '') {
                return "输入银行卡CVV2";
            } else if (_cvv2.length != 3) {
                return "CVV2为银行卡背面三位数字";
            }
        }
        var _mobile = $("#mobile").val().trim();
        if (_mobile == '') {
            return "输入银行预留手机号";
        } else if (!$.phone(_mobile)) {
            return "输入手机号不正确";
        }
        return "";
    }
    <!--获取验证码-->
    function getVerifyCode() {
        var  _msg=checkData();
        if (_msg == "") {
            verifyCodeTime(); //重新计时
            $.ajax({
                type: "post",
                url: "<%=request.getContextPath()%>/mobile/index/nocardConfirmPay",
                data:$('#nocardForm').serialize(),
                success: function (data) {
                    window.openMsg(data.msg,2 );
                    if (data.code == "1") {
                        $('#orderId').val(data.info.orderId);
                        $('#ksPayOrderId').val(data.info.ksPayOrderId);
                    }else{
                        $('#orderId').val('');
                        $('#ksPayOrderId').val('');
                        wait=0;
                    }
                }
            });
        }
        else {
            window.openMsg(_msg, 3);
        }
    }



    $("[id^=collasp]").bind("click", function (event) {
        var _index = $(this).attr("id").substr(7);
        event.stopPropagation();
        $("#detailId").toggle();
        var _i = $(this);
        if (_i.hasClass('ico15')) {
            _i.removeClass("ico15").addClass("ico16");
        } else {
            _i.removeClass("ico16").addClass("ico15");
        }
    });
</script>
</html>